<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, user-scalable=no, maximun-scale=1,minimun-scal=1"
		/>
		<title>Document</title>
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}
			html {
				font-size: 40px;
			}
			html,
			body {
				width: 100%;
				height: 100%;
			}
			.header-container {
				height: 2.5rem;
				width: 100%;
				background-color: tomato;
			}
			.main-container {
				padding: 2.5rem 0;
				background-color: #eee;
			}
			.slider-container {
				height: 7.5rem;
				background-color: teal;
			}
			.nav-container {
				height: 6.25rem;
				background-color: thistle;
			}
			.pro-container {
				height: 50rem;
				background-color: pink;
			}
			.footer-container {
				height: 2.5rem;
				background-color: white;
			}
			.header-container,
			.footer-container {
				position: fixed;
				left: 0;
				width: 100%;
				z-index: 1000;
			}
			.header-container {
				top: 0;
			}
			.footer-container {
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="header-container"></div>
		<div class="main-container">
			<div class="slider-container"></div>
			<div class="nav-container"></div>
			<div class="pro-container"></div>
		</div>
		<div class="footer-container"></div>
		<!-- <script src="./Simple.js"></script> -->
		<script src="./ScreenAdaptation.js"></script>
	</body>
</html>
